<template>
  <div class="mod-prod-brand">
    <div class="search-bar">
      <el-form :inline="true" class="search-form" size="small">
        <div class="input-row">
          <el-form-item :label="$t('chatMsg.groupName')" prop="groupName">
            <el-input v-model="searchParam.groupName" :placeholder="$t('chatMsg.keyupGroupName')" maxlength="30" clearable/>
          </el-form-item>

          <el-form-item prop="type" label="群类型">
            <el-select v-model="searchParam.type" clearable>
              <el-option label="普通群" :value="0"></el-option>
              <el-option label="超级群" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="isDismiss" label="状态">
            <el-select v-model="searchParam.isDismiss" clearable>
              <el-option label="未解散" :value="0"></el-option>
              <el-option label="已解散" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="isOfficial" label="是否官方群">
            <el-select v-model="searchParam.isOfficial" clearable>
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="isOfficial" label="是否到期">
            <el-select v-model="searchParam.isArrears" clearable>
              <el-option label="否" :value="0"></el-option>
              <el-option label="是" :value="1"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="default-btn primary-btn" @click="searchChange(true)">{{$t('crud.searchBtn')}}</div>
            <div class="default-btn" @click="resetSearchForm()">{{$t('product.reset')}}</div>
          </el-form-item>
          <el-form-item style="float: right">
            <div class="default-btn primary-btn" @click="handleGroupChat()">创建群聊</div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con spec-table">
        <el-table
          ref="specListTable"
          :data="dataValue"
          header-cell-class-name="table-header"
          row-class-name="table-row"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}"
          style="width: 100%">

          <el-table-column
            prop="id"
            :label="$t('chatMsg.groupId')"
            width="80"
          >
          </el-table-column>

          <el-table-column
            prop="type"
            :label="$t('chatMsg.type')"
            width="80"
          >
            <template slot-scope="scope">
              <el-tag type="info" v-if="scope.row.type === '0'">普通</el-tag>
              <el-tag type="success" v-else-if="scope.row.type === '1'">超级群</el-tag>
            </template>
          </el-table-column>

          <el-table-column
            prop="name"
            :label="$t('chatMsg.groupName')"
          >
            <template slot-scope="scope">
              <div class="table-cell-text">{{ scope.row.groupName }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="groupQrCode"
            :label="$t('chatMsg.qrCode')"
            width="90"
          >
            <template slot-scope="scope">
              <div class="table-cell-con">
                <div class="table-cell-image">
                  <el-image v-if="scope.row.groupQrCode" :src="resourcesUrl + scope.row.groupQrCode" :preview-src-list="[resourcesUrl + scope.row.groupQrCode]" />
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="shopName"
            label="所属方"
          >
            <template slot-scope="scope">
              <div class="table-cell-text" v-if="scope.row.shopId == null">用户</div>
              <div class="table-cell-text" v-else-if="scope.row.shopId == 0">DTC平台</div>
              <div class="table-cell-text" v-else>{{ scope.row.shopName }}</div>
            </template>
          </el-table-column>

          <el-table-column
            prop="creatorUserId"
            :label="$t('chatMsg.groupCreate')"
          >
          </el-table-column>

          <el-table-column
            prop="creatorUserName"
            :label="$t('chatMsg.groupCreateName')"
          >
          </el-table-column>

          <el-table-column
            prop="createDate"
            :label="$t('chatMsg.createTime')"
            width="170"
          >
          </el-table-column>

          <el-table-column
            prop="isOfficial"
            label="官方群"
            width="80"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isOfficial == 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('chatMsg.bannedStatus')"
            width="80"
          >
            <template slot-scope="scope">
              <div class="table-cell-text">{{ scope.row.groupStatus==0?$t('chatMsg.noBrand'):$t('chatMsg.overBrand')
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('chatMsg.dismissStatus')"
            width="80"
          >
            <template slot-scope="scope">
              <div class="table-cell-text">{{ scope.row.isDismiss==0?$t('chatMsg.noDismiss'):$t('chatMsg.dismiss')
                }}
              </div>
            </template>
          </el-table-column>

          <el-table-column
            prop="isArrears"
            label="是否到期"
            width="80"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.type == 0">-</span>
              <span v-else-if="scope.row.isArrears == 1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="expirationTime"
            label="超级群到期时间"
            width="170"
          >
            <template slot-scope="scope">
              <div class="table-cell-text" style="color: #d40707" v-if="scope.row.type == 1 && scope.row.expirationTime">{{scope.row.expirationTime}}</div>
              <div class="table-cell-text" v-else-if="scope.row.type == 1 && !scope.row.expirationTime">永久</div>
              <div class="table-cell-text" v-else>--</div>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            :label="$t('publics.operating')"
            width="350"
          >
            <template slot-scope="scope">
              <div class="text-btn-con">

                <div
                  class="default-btn text-btn"
                  @click="lookUserFunc(scope.row.id)"
                >{{$t('chatMsg.lookUsers')}}
                </div>

                <div
                  class="default-btn text-btn"
                  v-if="scope.row.isDismiss == 0 && scope.row.shopId == 0"
                  @click="bannedFunc(scope.row)"
                > {{ scope.row.groupStatus==0?$t('chatMsg.groupOpemBanned'):$t('chatMsg.groupCloseBanned')}}
                </div>

                <div
                  class="default-btn text-btn"
                  v-if="scope.row.isDismiss == 0 && scope.row.shopId == 0"
                  @click="announcementFunc(scope.row)"
                >{{$t('chatMsg.announcement')}}
                </div>

                <div
                  class="default-btn text-btn"
                  v-if="scope.row.isDismiss == 0 && scope.row.shopId == 0"
                  @click="dissolveFunc(scope.row)"
                >{{$t('chatMsg.dissolve')}}
                </div>
                <div
                  v-if="scope.row.isDismiss == 0 && scope.row.shopId == 0"
                  class="default-btn text-btn"
                  @click="handleOpneGroup(scope.row)"
                >{{$t('chatMsg.updateName')}}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-if="dataValue.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
    <!-- 查看群成员 -->
    <groupMember ref="userChild" :groupId="groupId"></groupMember>
    <!-- 发布群公告 -->
    <groupAnnouncement ref="announceChild" :itemVal="itemVal"></groupAnnouncement>

    <!-- 弹窗, 处理 -->
    <el-dialog title="创建群聊"
               :visible.sync="dialogGroupChatVisible"
               center width="35%"
               :close-on-click-modal="false"
               :before-close="handleClose" >
      <el-form
        class="dialog-form"
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="submitGroup()"
        label-width="100px"
      >
        <el-form-item label="群名称：" prop="groupName">
          <el-input v-model="dataForm.groupName" placeholder="输入群名称"  maxlength="30"  clearable></el-input>
        </el-form-item>
<!--        <el-form-item label="是否超级群：" prop="type">
          <el-radio-group v-model="dataForm.type">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.type == 1">
          <span style="color: #f1ad06">在此创建超级群聊，将永久免费</span>
        </el-form-item>-->
        <el-form-item label="是否官方群：" prop="isOfficial">
          <el-radio-group v-model="dataForm.isOfficial">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </el-form-item>
<!--        <el-form-item label="官方群所属：" prop="shopId" v-if="dataForm.isOfficial == 1">-->
<!--          <el-select v-model="dataForm.shopId" placeholder="选择官方店铺或平台" clearable>-->
<!--            <el-option value="0" label="DTC-平台"></el-option>-->
<!--            <el-option-->
<!--              v-for="item in shopList"-->
<!--              :key="item.shopId"-->
<!--              :label="item.shopName"-->
<!--              :value="item.shopId">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submitGroup()" v-loading = "dialogGroupChatUpdateNameLoading">确定</el-button>
      </span>
    </el-dialog>
    <!-- 修改名称弹窗, 处理 -->
    <el-dialog title="修改群名"
               :visible.sync="dialogGroupChatUpdateNameVisible"
               center
               width="35%"
               onload=""
               :close-on-click-modal="false"
               :before-close="handleUpdateClose">
      <el-form
        class="dialog-form"
        :model="dataUpdateForm"
        :rules="data1Rule"
        ref="dataForm"
        @keyup.enter.native="updateGroupNameFunc()"
        label-width="100px"
      >
        <el-form-item label="群名称：" prop="name">
          <el-input v-model="dataUpdateForm.name" placeholder="输入群名称"  maxlength="30"  clearable></el-input>
        </el-form-item>
        <el-form-item label="群名称：" prop="id"  hidden>
          <el-input v-model="dataUpdateForm.id"  ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleUpdateClose">取消</el-button>
        <el-button type="primary" @click="updateGroupNameFunc()" v-loading = "dialogGroupChatUpdateNameLoading">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import groupMember from './components/groupMember'
  import groupAnnouncement from './components/groupAnnouncement'

  export default {
    components: {groupMember, groupAnnouncement},
    data () {
      return {
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dataValue: [],
        groupId: null,
        itemVal: {}, // 获取当前列数据myFriendListPage
        groupName: '',
        dataForm: {
          groupName: '',
          type: 0,
          isOfficial: 1,
          shopId: null
        },
        dataUpdateForm: {
          name: '',
          id:''
        },
        shopList: [],
        dialogGroupChatVisible: false,
        dialogGroupChatUpdateNameVisible: false,
        dialogGroupChatUpdateNameLoading: false,
        // 修改
        page: {
          pageSize: 10,
          pageNum: 1,
          total: null
        },
        searchParam: {
          groupName: '',
          isDismiss: null,
          isArrears: null,
          type: null,
          isOfficial: null
        },
        dataRule: {
          groupName: [
            { required: true, message: '群名称不能为空', trigger: 'blur' }
          ]
        },
        data1Rule: {
          name: [
            { required: true, message: '群名称不能为空', trigger: 'blur' }
          ]
        }
      }
    },

    created () {
      this.getMeltUserToken()
      this.getDataList()
      this.getShopList()
    },
    methods: {

      // 获取数据列表
      getDataList (page, newData = false) {
        this.$http({
          url: this.$http.adornUrl('/admin/melt/group/list'),
          method: 'get',
          params: this.$http.adornParams(
            Object.assign(
              this.page,
              this.searchParam
            )
          )
        }).then((data) => {
          this.dataValue = data.data.list
          this.page.total = data.data.total
        })
      },
      getShopList () {
        this.$http({
          url: this.$http.adornUrl('/platform/shopDetail/searchShops'),
          method: 'get',
          params: this.$http.adornParams({
            current: 1,
            size: -1,
            shopName: ''
          })
        }).then(({data}) => {
          this.shopList = data.records
        }).catch((err) => {
        })
      },
      // 搜索
      searchChange () {
        this.getDataList()
      },

      // 重置
      resetSearchForm () {
        this.searchParam = {
          groupName: '',
          isDismiss: null,
          isArrears: null,
          type: null,
          isOfficial: null
        }
        this.getDataList()
      },

      // 查看群成员
      lookUserFunc (id) {
        this.$refs.userChild.dialogVisible = true
        this.groupId = id
        this.$nextTick(() => {
          this.$refs.userChild.getDataList()
        })
      },

      // 开启禁言
      bannedFunc (row) {
        if ( this.dialogGroupChatUpdateNameLoadin ) {
          return
        }
        this.dialogGroupChatUpdateNameLoadin = true
        var url
        if (row.groupStatus == 0) {
          url = '/admin/melt/group/groupMute'
        } else {
          url = '/admin/melt/group/groupMuteCancel'
        }
        this.$http({
          url: this.$http.adornUrl(url),
          method: 'post',
          data: [row.id]
        }).then((data) => {
          console.log('状态', data)
          this.$message({
            message: row.groupStatus == 0 ? this.$i18n.t('chatMsg.opemBannedStatus') : this.$i18n.t('chatMsg.closeBannedStatus'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.dialogGroupChatUpdateNameLoadin = false
              this.getDataList()
            }
          })
        })
      },
      handleOpneGroup (row) {
        this.dialogGroupChatUpdateNameVisible = true
        this.dataUpdateForm = {
          id: row.id,
          name: row.groupName
        }
      },
      //修改名称
      updateGroupNameFunc () {
        this.dialogGroupChatUpdateNameLoading = true
        this.$http({
          url: this.$http.adornUrl('/admin/melt/group/updateGroup'),
          method: 'post',
          data: this.dataUpdateForm
        }).then((data) => {
          this.$message({
            message: this.$i18n.t('chatMsg.updateNameSuccess'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.dialogGroupChatUpdateNameLoading = false
              this.dialogGroupChatUpdateNameVisible = false
              this.getDataList()
            }
          })
        }).catch(() => {
          this.dialogGroupChatUpdateNameLoading = false
        })
      },
      // 解散
      dissolveFunc (row) {
        if ( this.dialogGroupChatUpdateNameLoadin ) {
          return
        }
        this.dialogGroupChatUpdateNameLoadin = true
        let dissolveValue = {
          groupId: row.id,
          groupName: row.groupName,
          creatorUserId: row.creatorUserId,
          users: [{
            id: row.creatorUserId
          }]
        }
        this.$http({
          url: this.$http.adornUrl('/admin/melt/group/dismiss'),
          method: 'post',
          data: dissolveValue
        }).then((data) => {
          this.$message({
            message: this.$i18n.t('chatMsg.dissolveSuccess'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.dialogGroupChatUpdateNameLoadin = false
              this.getDataList()
            }
          })
        })
      },
      // 发公告
      announcementFunc (row) {
        this.$refs.announceChild.dialogVisible = true
        this.itemVal = row
        this.$refs.announceChild.inits()
      },

      // 分页
      handleSizeChange (val) {
        this.page.pageSize = val
        this.getDataList()
      },
      handleCurrentChange (val) {
        this.page.pageNum = val
        this.getDataList()
      },
      handleGroupChat () {
        this.dialogGroupChatVisible = true
      },
      submitGroup () {
        if ( this.dialogGroupChatUpdateNameLoadin ) {
          return
        }
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            // if (this.dataForm.isOfficial == 1) {
            //     if (this.dataForm.shopId == null) {
            //       this.$message.error('官方群所属方不能为空！')
            //       return
            //     }
            // } else {
            // }
            this.dataForm.shopId = null
            this.dialogGroupChatUpdateNameLoading = true
            this.$http({
              url: this.$http.adornUrl('/admin/melt/group/createGroup'),
              method: 'post',
              data: this.dataForm
            }).then((data) => {
              this.$message({
                message: this.$i18n.t('publics.operation'),
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dialogGroupChatUpdateNameLoading = false
                  this.handleClose()
                  this.getDataList()
                }
              })
            })
          }
        })
      },
      getMeltUserToken () {
        this.$http({
          url: this.$http.adornUrl('/admin/melt/user/token'),
          method: 'get'
        }).then((data) => {})
      },
      handleUpdateClose () {
        this.dataUpdateForm = {
          name : '',
          id: ''
        }
        this.dialogGroupChatUpdateNameVisible = false
      },
      handleClose () {
        this.dataForm = {
          groupName: '',
          type: 0,
          isOfficial: 0,
          shopId: null
        }
        this.dialogGroupChatVisible = false
      }
    }
  }
</script>
